<template>
  <div class="m-paging">
    <button
      class="prev-next-num prev" 
      :disabled="curIndex === 1"
      @click="curIndex-- && onGoto(curIndex--)">
      < 上一页
    </button>
    <!-- 左侧省率 -->
    <div style="display: inline-block"  v-if="total > 5 && curIndex - 2 > 2">
      <button class="pages-num" @click="onGoto(1)">1</button>
      <button class="pages-num border-right" @click="onGoto(2)">2</button>
      <button class="ellipsis" disabled>...</button>
    </div>
    <button v-for="index in pages"
      :key="index" 
      :class="{actived: curIndex === index, 'border-right': index == (pages.length - 1 + pages[0])}" 
      v-text="index"
      @click="onGoto(index)" class="pages-num">
    </button>
    <!-- 右侧省率 -->
    <button class="ellipsis" v-if="total > 5 && curIndex + 2 < total" disabled>...</button>
    <button
      class="prev-next-num next" 
      :disabled="total === curIndex && total !== 0" 
      @click="curIndex++ && onGoto(curIndex++)">
      下一页 >
    </button>
    <span class="total-page" v-show="total > 5">共{{total}}页，</span>
    <div class="go-page" v-show="total > 5">
      到第<input type="text" v-model="curPage">页
      <button id="sure" @click="onChangePage">确定</button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      current: {
        type: Number,
        default: 1
      },
      showItem: {
        type: Number,
        default: 5
      },
      total: {
        type: Number,
        default: 4
      }
    },
    data() {
      return {
        curIndex: this.current,
        curPage: 1
      }
    },
    computed: {
      pages() {
        let page = []
        if (this.curIndex < this.showItem) {
          let i = Math.min(this.showItem, this.total)
          while (i) {
            page.unshift(i--)
          }
        } else {
          let middle = this.curIndex - Math.floor(this.showItem / 2)
          let i = this.showItem
          if (middle > (this.total - this.showItem)) {
            middle = (this.total - this.showItem) + 1
          }
          while (i--) {
            page.push(middle++)
          }
        }
        return page
      }
    },
    watch: {
      current() {
        this.curIndex = this.current
      }
    },
    methods: {
      onGoto(index) {
        if (this.curIndex !== index) {
          this.curIndex = index
          this.$emit('on-page', index)
        }
      },
      onChangePage() {
        const curPage = Number(this.curPage)
        if (curPage > 0 && curPage <= this.total) {
          this.onGoto(curPage)
        }
        this.curPage = null
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '../scss/_var.scss';
  .m-paging {
    display: block;
    margin: 15px 0;
    text-align: center;
    font-size: 0;
    button {
      background: white;
      border-radius: 0px;
      font-size: 12px;
      height: 36px;
      width: 36px;

      &.ellipsis {
        background: rgba(0, 0, 0, 0);
        cursor: default;
        width: 22px;

        &:hover {
          border: 0px;
        }
      }
      &.prev-next-num {
        border: 1px solid #eeeeee;
        width: 70px;

        &.prev {
          margin-right: 6px;
        }
        &.next {
          margin-left: 6px;
        }
      }
      &.pages-num {
        border-radius: 0px;
        border-left: 1px solid #eeeeee;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;

        &.border-right {
          border-right: 1px solid #eeeeee;

          &:hover {
            border-color: #f10180;
          }
        }
      }
      &#sure {
        border: 1px solid #ededed;
        color: #333333;
        width: 44px;
        height: 26px;
        padding: 0px;
      }
      &:hover {
        color: $color-main;
        border: 1px solid $color-main;
      }
      &.actived {
        color: $color-main;
        border: 1px solid $color-main;
        // background: #f10180;
        // border: 1px solid #f10180;
        // color: #fff;
      }
      &[disabled] {
        border-color: #eeeeee;
        color: #999;
        cursor: default;
      }
    }
    .total-page {
      display: inline-block;
      font-size: 14px;
      color: #999;
      margin-left: 16px;
    }
    .go-page {
      display: inline-block;
      font-size: 14px;
      color: #999;
      input {
        width: 34px;
        height: 26px;
        padding: 0 6px;
        border: 1px solid #ececec;
        border-radius: 4px;
        margin: 0 6px;
        text-align: center;
      }
      button {
        height: 26px;
        padding: 0 10px;
        margin-left: 10px;
      }
    }
  }
</style>
